import React, {Component, Fragment} from 'react';
import {Card, Button, notification} from 'antd';

import './ui.less';

class Notifications extends Component {

    handleInfoClick = (type, place) => {
        if (place) {
            notification[type]({
                message: '通知',
                description: '哈士奇， 你挺优秀的啊！ 你真的好牛逼啊， 你就是腾讯皮总监， 架构师卓！',
                placement: place
            });
        } else {
            notification[type]({
                message: '通知',
                description: '哈士奇， 你挺优秀的啊！ 你真的好牛逼啊， 你就是腾讯皮总监， 架构师卓！'
            });
        }
    };


    handleInfoDestroyClick = () => {
        notification.destroy();
    };


    render() {
        return (
            <Fragment>
                <Card title={'消息提示框'} className={'card-wrap'}>
                    <Button type={'primary'} key={'info'} onClick={() => this.handleInfoClick('info')}>Info</Button>
                    <Button type={'primary'} key={'open'} onClick={() => this.handleInfoClick('open')}>Open</Button>
                    <Button type={'primary'} key={'success'} onClick={() => this.handleInfoClick('success')}>Success</Button>
                    <Button type={'primary'} key={'warn'} onClick={() => this.handleInfoClick('warn')}>Warn</Button>
                    <Button type={'primary'} key={'warning'} onClick={() => this.handleInfoClick('warning')}>Warning</Button>
                    <Button type={'primary'} key={'error'} onClick={() => this.handleInfoClick('error')}>Error</Button>
                    <Button type={'primary'} onClick={this.handleInfoDestroyClick}>Destroy关闭所有</Button>
                </Card>
                <Card title={'自定义位置消息提示框'} className={'card-wrap'}>
                    <Button type={'primary'} onClick={() => this.handleInfoClick('info', 'topLeft')}>左上角</Button>
                    <Button type={'primary'} onClick={() => this.handleInfoClick('info', 'topRight')}>右上角</Button>
                    <Button type={'primary'} onClick={() => this.handleInfoClick('info', 'bottomLeft')}>左下角</Button>
                    <Button type={'primary'} onClick={() => this.handleInfoClick('info', 'bottomRight')}>右下角</Button>
                </Card>
            </Fragment>
        );
    }
}

export default Notifications;